<template>
  <div class="Home-Package">
    <div class="nav-top">
      <nav-bar left-text="" left-arrow @click-left="onClickLeft">
        <template #title>
          <cell is-link @click="showPopup">
            <span>套餐</span>&nbsp;&nbsp;
            <i
              style="font-size: 1.25rem"
              :class="rotate % 2 == 0 ? 'fa fa-angle-up' : 'fa fa-angle-down'"
            ></i>
          </cell>
        </template>
        <template #right>
          <router-link :to="{ name: 'Home-input' }">
            <icon
              name="search"
              size="18"
              class="icon-search"
              @click-right="onClickRight"
            />
          </router-link>
        </template>
      </nav-bar>
    </div>
    <!-- 弹出层 -->

    <popup
      round
      @click-overlay="clickHandle"
      v-model:show="show"
      style="
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 95px;
        width: 50vw;
        height: 15vh;
        box-sizing: border-box;
      "
    >
    <div class="rotate-main">
          <grid :column-num="3" :border="false">
  <grid-item v-for="item in course" :text="item.title" :to="{ name: item.link, query: { id: item.id } }"/>
</grid>
      </div>
    </popup>

    <div class="listMove">
            <div class="content" v-for="item in Package" @click="toDetail(item.id)">
              <img :src="item.picture" :alt="item.comboName" />
              <div class="con1">
                <h5>{{item.name}}</h5>
                <span
                  ><i class="fa fa-copyright" aria-hidden="true"></i>{{item.price}}</span
                >
              </div>
              <div class="con2">
                <div class="con2-1">
                  <span>课程：<i>79</i>个</span><span>视频：<i>80</i>集</span
                  ><span>习题：87道</span>
                </div>
                <div class="con2-2">
                  <span
                    ><i class="fa fa-copyright" aria-hidden="true" style="text-decoration: line-through;"></i>{{item.price}}</span
                  >
                </div>
              </div>
            </div>
    </div>
  </div>
</template>

<script setup>
import {
  NavBar,
  Icon,
  Popup,
  Grid,
  GridItem
} from "vant";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import "font-awesome/css/font-awesome.min.css";
import {ComboTreeAPI} from "../API/wang";
// 引入接口
const Package = ref([]);
ComboTreeAPI().then((res)=>{
  Package.value=res.data;
  console.log(Package.value);
})
/* 弹出层 */
/* 顶部弹出部分 */
let course = ref([
  { title: "初中数学", id: 1, link: "Home-MiddleMath" },
  { title: "经典语文", id: 2, link: "Home-Chinese" },
  { title: "趣味英语", id: 3, link: "Home-English" },
  { title: "初中物理", id: 4, link: "Home-Physics" },
  { title: "初中化学", id: 5, link: "Home-Chemistry" },
  { title: "高中数学", id: 6, link: "Home-HighMath" },
  { title: "小学数学", id: 7, link: "Home-Mathematics" },
  { title: "套餐", id: 8, link: "Home-Package" },
]);
/* 箭头旋转 */
const rotate = ref(1);
const show = ref(false);
const showPopup = () => {
  rotate.value++;
  if (rotate.value % 2 == 0) {
    show.value = true;
  }
  console.log(rotate.value);
};
let clickHandle = () => {
  rotate.value = 1;
};
/* 返回上一级 */
const router = useRouter();
const onClickLeft = () => {
  router.push({
    name: "Home",
  });
};
/* 跳转详情 */
const toDetail = (id) => {
  router.push({
    name:"Home-MoveLessonTo",
    query:{
      id,
    }
  })
}
</script>
<style>
#app{
  padding-bottom: 0;
}
.Home-Package{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.Home-Package .van-nav-bar .van-icon{
  color: #333;
}
.Home-Package .listMove .van-tab--card {
  color: #666;
}
.Home-Package .listMove .van-tabs__nav--card {
  border: none;
}
.Home-Package .listMove .van-tab--card.van-tab--active {
  background-color: cornflowerblue;
  color: aliceblue;
  font-size: 0.12rem;
  height: 1.3rem;
  margin: auto 0;
  border-radius: 0.3rem;
}
.Home-Package .Home-Package {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.Home-Package .nav-top .icon-search {
  color: #333;
}
.Home-Package .nav-top .Icon-search {
  transform: rotate(-180deg);
}
.Home-Package li {
  width: 30%;
  line-height: 25px;
  text-align: center;
  border-radius: 17px;
}
.Home-Package .van-tab--card {
  border: none;
}
.Home-Package .rotate-main {
  width: 50vw;
  height: 15vh;
  margin: 0 auto;
  border-radius: 6px;
  font-size: 12px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.Home-Package ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.Home-Package li {
  width: 30%;
  line-height: 25px;
  text-align: center;
  border-radius: 17px;
  color: #666;
}
.Home-Package .listMove{
  flex: 1;
  overflow: auto;
}
.Home-Package .content {
  width: 90vw;
  height: 30vh;
  box-sizing: border-box;
  padding: .3rem;
  margin: 1rem auto;
  display: flex;
  flex-direction: column;
  border-radius: .2rem;
  box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.5);
}
.Home-Package .content img {
  height: 70%;
}
.Home-Package .con1 {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.Home-Package .con1 span {
  color: orange;
  font-weight: bolder;
}
.Home-Package .con1 span i {
  margin-right: 0.2rem;
}
.Home-Package .con2 {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  font-size: 0.12rem;
}
.Home-Package .con2 .con2-1 span {
  margin-right: 0.6rem;
}
.Home-Package .con2 .con2-2 {
  text-decoration: line-through;
}
.Home-Package a {
  color: #333;
}
.Home-Package .van-popup--center.van-popup--round {
  border-radius: 0.3rem;
}
.Home-Package .van-nav-bar__content{
  border-bottom: 0.0625rem solid #e8e5e5;
}
.Home-Package i{
  font-style: normal;
}
.Home-Package .van-tabs__line{
  z-index: 0!important;
}
/* 弹出层样式 */
.Home-Package .van-grid-item__content{
  padding: 0;
}
.Home-Package .van-grid-item__text{
  line-height: 1.9rem;
}
</style>
